<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./index.css">

<body>
    <div id="app">
        <button @click="btn = true">登录</button>
        <div class="blblmask" v-if="btn">
            <div class="blblcont"
                :style="imgflag?{ backgroundImage: `url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png), url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png) ` } : { backgroundImage: `url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_close.9382a5a8.png), url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_close.a8c18fc8.png)`}">
                <div class="blblicon" @click="btn = false"></div>
                <div class="blblsco">
                    <div class="scologin">扫描二维码登录</div>
                    <div class="scologinhove">
                        <div class="scologinbox">
                            <img :src="mouseOver? './img/1.png' : './img/2.png'" @mouseover="mouseOver = true"
                                @mouseout="mouseOver = false" />
                        </div>
                    </div>
                    <div class="login-scan-desc">
                        <p> 请使用 <a href="https://app.bilibili.com/" target="_blank">哔哩哔哩客户端</a></p>
                        <p>扫码登录或扫码下载APP</p>
                    </div>
                </div>
                <div class="blbllink">

                </div>
                <div class="bili-mini-login-right-wp">
                    <div class="login-tab-wp">
                        <div @click="logini = 1" class="login-tab-item" :class="{'active-tab': logini ===1}"> 密码登录
                        </div>
                        <div class="login-tab-line"></div>
                        <div @click="logini = 2" class="login-tab-item" :class="{'active-tab': logini ===2}"> 短信登录
                        </div>
                    </div>
                    <div class="login-pwd-wp" v-if="logini === 1">
                        <form class="tab__form">
                            <div class="form__item">
                                <div class="form_info">账号</div><input autocomplete="on" maxlength="32"
                                    oninput="value=value.replace(/\s+/g, '')" placeholder="请输入账号" type="text">
                            </div>
                            <div class="form__separator-line"></div>
                            <div class="form__item">
                                <div class="form_info">密码</div><input autocomplete="on" maxlength="32"
                                    oninput="value=value.replace(/\s+/g, '')" placeholder="请输入密码" type="password"
                                    @click="imgflag = false" @blur="imgflag = true">
                                <div class="clickable">忘记密码？</div>
                            </div>
                        </form>
                        <div class="btn_wp">
                            <div class="btn_other">注册</div>
                            <div class="btn_primary" :disabled=""> 登录 </div>
                        </div>
                    </div>
                    <div class="login-sms-wp" v-if="logini === 2">
                        <form class="tab__form">
                            <div class="form__item">
                                <div class="login-sms-wp__cid" @click="formflag = true"> +86 <img
                                        src="https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/select_arrow.ce6b4ad2.svg">
                                </div><input maxlength="15" oninput="value=value.replace(/[^\d]/g, '')"
                                    placeholder="请输入手机号">
                                <div class="login-sms-wp__vertical-line"></div>
                                <div class="login-sms-send clickable disable"> 获取验证码 </div>
                            </div>
                            <div class="form__separator-line"></div>
                            <div class="form__item">
                                <div>验证码</div><input placeholder="请输入验证码" maxlength="6"
                                    oninput="value=value.replace(/[^\d]/g, '')" @click="imgflag = false"
                                    @blur="imgflag = true">
                            </div>
                        </form>
                        <div class="btn_wp" style="justify-content: center;"><!---->
                            <div class="btn_primary "> 登录/注册 </div>
                        </div>
                        <div class="area-code-select" v-for="(item,index) in diqu" v-if="formflag">
                            <div class="option checked"><span>{{ item.addres }}</span><span>{{ item.qu }}</span></div>
                        </div>
                    </div>
                    <div class="login-sns-wp">
                        <div class="login-sns-title">其他方式登录</div>
                        <div class="login-sns-content">
                            <div class="login-sns-item"><img
                                    src=""
                                    class="login-sns-item-icon"><span class="login-sns-name">微信登录</span></div>
                            <div class="login-sns-item"><img
                                    src=""
                                    class="login-sns-item-icon"><span class="login-sns-name">微博登录</span></div>
                            <div class="login-sns-item"><img
                                    src=""
                                    class="login-sns-item-icon"><span class="login-sns-name">QQ登录</span></div>
                        </div>
                    </div>
                </div>
                <div class="login-agreement-wp">
                    <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 <!----></p>
                    <p> 登录或完成注册即代表你同意 <span> 用户协议 <span class="link_word"> 和 </span></span><span> 隐私政策 <span
                                class="link_word"> </span></span></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            const btn = ref(false)
            const mouseOver = ref(false)
            const logini = ref(1)
            const formflag = ref(false)
            const imgflag = ref(true)
            const diqu = ref([{
                addres: "中国大陆",
                qu: +86
            }, {
                addres: "中国香港特别行政区",
                qu: +852
            }
                , {
                addres: "中国澳门特别行政区",
                qu: +853
            }
                , {
                addres: "中国台湾",
                qu: +886
            }
                , {
                addres: "美国",
                qu: +1
            }])
            return {
                btn,
                mouseOver,
                logini, formflag, imgflag, diqu
            }
        }
    }).mount("#app")
</script>

</html>